<!-- 多个文件上传 -->
<template>
  <div class="upload-multi-file-wrapper">
    <el-upload
      action="#"
      multiple
      :on-remove="handleRemove"
      :http-request="uploadFiles"
      :file-list="files"
    >
      <el-button size="small" type="primary">{{ buttonName }}</el-button>
      <div slot="tip" class="el-upload__tip">{{ tip }}</div>
    </el-upload>
  </div>
</template>

<script>
import { uploadFileData } from '@/api/upload'
import { getByXml } from '@/utils'
// import {  } from '@/'

export default {
  // import引入的组件需要注入到对象中
  components: {
  },
  props: {
    buttonName: {
      type: String,
      default: '点击上传'
    },
    tip: {
      type: String,
      default: ''
    },
    fileList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    // 存放数据
    return {
      files: []
    }
  },
  // 监听属性
  computed: {
  },
  // 监控data中的数据变化
  watch: {
  },
  // 生命周期 - 创建完成
  created() {
    if (this.fileList) {
      this.files = this.fileList
    }
  },
  // 方法
  methods: {
    uploadFiles(e) {
      console.log('@@@@', this.files)
      uploadFileData(e.file).then(res => {
        const fileUrl = getByXml(res, 'Key')
        this.files.push({ id: e.file.uid, name: e.file.name, fileUrl: fileUrl })
        this.$emit('getFileList', this.files)
      })
    },
    handleRemove(file) {
      // console.log('handleRemove', this.fileList)
      this.files = this.fileList.filter(item => {
        return item.id !== file.id
      })
      this.$emit('getFileList', this.files)
    }
  }
}
</script>
<style lang='scss' scoped>
// @import url(); // 引入公共css类
.upload-multi-file-wrapper {
  margin: 8px;
}
</style>
